const form = document.querySelector('form');
const goodsName = document.querySelector('#goodsName');
const goodsCategory = document.querySelector('#goodsCategory');
const originPrice = document.querySelector('#originPrice');
const nowPrice = document.querySelector('#nowPrice');
const goodsNum = document.querySelector('#goodsNum');
const yesRadio = document.querySelector('#yes');
const noRadio = document.querySelector('#no');
const options = document.querySelector('.options');
const tbody = document.querySelector('tbody');

// 待做：刷新页面表格数据不可丢失 (使用localStorage)

let i = 0; // 为数据的id标识符赋值

// 提交表单信息功能
form.addEventListener('submit', e => {
  e.preventDefault(); // 阻止表单提交的默认行为
  let name = goodsName.value,
    category = goodsCategory.value,
    price = originPrice.value,
    discount = nowPrice.value,
    num = goodsNum.value,
    isRed = yesRadio.checked;
  // 验证表单内容不为空
  if (!name || !price || !discount || !num || (!isRed && !noRadio.checked)) {
    return alert('表单中的各项内容均不允许为空！请仔细检查是否漏填了一些选项');
  }
  // 限制原价、现价、数量的值必须为数字且不能为0
  if (!Number(price) || !Number(discount) || !Number(num)) { // 0, NaN
    return alert('商品原价、商品现价、库存数量的值必须为纯数字类型，且不能为0！');
  }
  i--; // 每次减一，id值不重复
  goodsData.unshift({
    id: i,
    name,
    category,
    price: price - 0, // String -> Number
    discount: discount - 0,
    num: num - 0,
    isRed // 是否标红的值：跟随单选按钮 “是” 的选中状态来决定，或者可以对 “否” 的选中状态取反 !noRadio.checked
  });
  bindHtml(goodsData);
  form.reset(); // 数据提交，渲染完毕，表单重置
});

bindHtml(goodsData);

// 传入指定数据，渲染 tbody 内容
function bindHtml(data) {
  tbody.innerHTML = data.reduce((prev, item) => {
    return prev + `
      <tr>
        <td class="${item.isRed?'redName':''}">${item.name}</td>
        <td>${item.category}</td>
        <td class="price">￥${item.price.toFixed(2)}</td>
        <td>￥${item.discount.toFixed(2)}</td>
        <td>${item.num}</td>
        <td>${item.isRed?'是':'否'}</td>
        <td class="del" data-index="${item.id}">删除</td>
      </tr>
    `;
  }, '');
}

let filterData; // 定义一个新的变量来保存分类筛选之后的数据

// 默认选中全部分类，展示所有商品信息
options.firstElementChild.style.color = 'red';

// 分类切换功能
options.addEventListener('click', e => {
  if (e.target.className === 'all') {
    bindHtml(goodsData);
    toggleColor(e);
  }
  if (e.target.className === 'fruit') {
    filterData = goodsData.filter(item => item.category === '优选水果');
    bindHtml(filterData);
    toggleColor(e);
  }
  if (e.target.className === 'cook') {
    filterData = goodsData.filter(item => item.category === '卤味熟食');
    bindHtml(filterData);
    toggleColor(e);
  }
  if (e.target.className === 'drink') {
    filterData = goodsData.filter(item => item.category === '饮料酒水');
    bindHtml(filterData);
    toggleColor(e);
  }
  if (e.target.className === 'snack') {
    filterData = goodsData.filter(item => item.category === '休闲零食');
    bindHtml(filterData);
    toggleColor(e);
  }
});

// 将选中的商品分类，文字颜色设为红色，其余未选中的默认为蓝色
function toggleColor(e) {
  [...options.children].forEach(item => item.style.color = 'blue');
  e.target.style.color = 'red';
}

// 删除商品信息功能
tbody.addEventListener('click', e => {
  if (e.target.className === 'del') {
    let index = e.target.dataset.index - 0;
    goodsData = goodsData.filter(item => item.id !== index);
    bindHtml(goodsData);
    options.firstElementChild.click();
  }
});